<template>
    <Form ref="form" :model="form" :rules="ruleValidate" label-position="left" :label-width="100">

        <FormItem label="分类" prop="type_name">
            <Select v-model="form.type_name" @on-change="studentData" placeholder="请选择分类">
                <Option v-for="(item,index) in tezcherList" :value="item.id" :key="index">{{ item.name.zh?item.name.zh:item.name.mn }}</Option>
            </Select>
        </FormItem>
        
        <FormItem label="状态">
            <RadioGroup v-model="form.type" @on-change="radioChange">
                <Radio v-for="(item,index) in typeList" :label="item.value" :key="index">{{ item.label }}</Radio>
            </RadioGroup>
        </FormItem>

        <FormItem v-if="studState" label="学生" prop="suser_id">

            <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
                <Checkbox :indeterminate="indeterminate" :value="checkAll" @click.prevent.native="handleCheckAll">全选</Checkbox>
            </div>

            <CheckboxGroup v-model="form.suser_id" @on-change="checkAllGroupChange">
                <Checkbox v-for="(item,index) in studentList" :key="index" :label="item.user_id">{{ item.student_name }}</Checkbox>
            </CheckboxGroup>
        </FormItem>

        <FormItem v-if="studState" label="细则" prop="watchlist_rules_id">
            <Select v-model="form.watchlist_rules_id" @on-change="rulesChange" placeholder="请选择细则">
                <Option v-for="(item,index) in rulesList" :value="item.watchlist_rules_id" :key="index">{{ item.labels }}</Option>
            </Select>
        </FormItem>

        <FormItem v-if="states" label="分值" prop="fixed_score">
            <Input v-model="form.fixed_score" placeholder="请输入固定分值"></Input>
        </FormItem>

        <FormItem label="备注" prop="remarks">
            <Input v-model="form.remarks.zh" placeholder="请输入备注"></Input>
        </FormItem>

        <FormItem>
            <Button type="primary" :loading="btnload" @click="handleSubmit('form')">{{ condition?'修改':'添加' }}</Button>
        </FormItem>
    </Form>
</template>

<script>
export default {
    props: {
        condition: {
            type: [Boolean, Number],
            default: false
        }
    },
    data () {
        return {
            btnload: false,
            form:{
                data_log_id: this.condition,
                suser_id: [],
                watchlist_rules_id: null,
                type_name: null,
                remarks: {
                    zh: null,
                    en: null,
                    mn: null,
                },
                type: 1,
            },
            typeList: [
                { label: '正常', value: 1 },
                { label: '异常', value: 2 }
            ],
            addurl: 'api/watchlist/v1/phoneticbeautytdata/add',
            editurl: 'api/watchlist/v1/phoneticbeautytdata/edit',
            selUrl: 'api/watchlist/v1/phoneticbeautytdata/find/' + this.condition,

            rulesUrl: 'api/watchlist/v1/get/phoneticbeautytrules/list',
            studentUrl: 'api/watchlist/v1/get/phoneticbeauty/lists',
            teacherType: 'api/watchlist/v1/get/phoneticbeautyclass/listteacher',

            studState: false,

            indeterminate: true,
            checkAll: false,

            states: false,
            studentList: [],
            tezcherList: [],
            rulesList: [],
            
            ruleValidate: {
                watchlist_rules_id: [
                    { required: true, type: 'number', message: '请选择细则', trigger: 'change' }
                ],
                suser_id: [
                    { required: true, type: 'array', message: '请选择学生', trigger: 'change' }
                ],
                fixed_score: [
                    { required: true, message: '请输入固定分值', trigger: 'blur' }
                ],
                type_name: [
                    { required: true, type: 'number', message: '请选择分类', trigger: 'change' }
                ]
            },
        }
    },
    methods: {
        
        /************************************************************
         * 
         * 表单验证
         * @param   {name}            要验证的表单
         * 
         ************************************************************/
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.btnload = true
                    if (this.condition) {
                        this.editSubmit ()
                    } else {
                        this.addSubmit ()
                    }
                } else {
                    this.$Message.error('请检查填写内容');
                }
            })
        },
        
        /************************************************************
         * 
         * 执行添加数据
         * 
         ************************************************************/
        addSubmit () {
            let datas = JSON.parse(JSON.stringify(this.form))
            if (this.form.type == '1') {
                delete datas.suser_id
                delete datas.watchlist_rules_id
            }
            delete datas.data_log_id
            this.$http.post(this.addurl, datas).then(res => {
                this.btnload = false
                this.$emit('requery',true)
            }).catch(err => {
                this.btnload = false 
            })
        },
        
        /************************************************************
         * 
         * 执行修改数据
         * 
         ************************************************************/
        editSubmit () {
            let datas = JSON.parse(JSON.stringify(this.form))
            if (this.form.type == '1') {
                delete datas.suser_id
                delete datas.watchlist_rules_id
            }
            this.$http.post(this.editurl, datas).then(val=>{
                this.btnload = false
                this.$emit('requery',true)
            }).catch(err => {
                this.btnload = false 
            })
        },
        
        /************************************************************
         * 
         * 选择状态
         * 
         ************************************************************/
        radioChange(index) {
            if (index == 2) {
                this.studState = true
            }else{
                this.studState = false
            }
        },
        
        /************************************************************
         * 
         * 多选
         * 
         ************************************************************/
        handleCheckAll () {
            if (this.indeterminate) {
                this.checkAll = false;
            } else {
                this.checkAll = !this.checkAll;
            }
            this.indeterminate = false;

            if (this.checkAll) {
                if(this.studentList.length != 0) {
                    this.studentList.forEach(item => {
                        this.form.suser_id.push(item.user_id)
                    })
                }else{
                    this.form.suser_id = []
                }
            } else {
                this.form.suser_id = [];
            }
        },
        
        /************************************************************
         * 
         * 多选
         * 
         ************************************************************/
        checkAllGroupChange (data) {
            if (data.length === this.studentList.length) {
                this.indeterminate = false;
                this.checkAll = true;
            } else if (data.length > 0) {
                this.indeterminate = true;
                this.checkAll = false;
            } else {
                this.indeterminate = false;
                this.checkAll = false;
            }
        },
        
        /************************************************************
         * 
         * 查询学生
         * 
         ************************************************************/
        studentData(index){
            this.form.suser_id = []
            let params = {
                typeid: index
            }
            this.$http.get(this.studentUrl, { params }).then(val => {
                this.studentList = val.data
            }).catch(err => {
            })
        },
        
        /************************************************************
         * 
         * 选择细则
         * 
         ************************************************************/
        rulesChange(index) {
            if(index != null){
                let data = this.rulesList.find(item => item.watchlist_rules_id == index)
                if(data.fixed_score == null) {
                    this.states = true
                    this.$set(this.form,'fixed_score',null)
                }else{
                    this.states = false
                    delete this.form.fixed_score
                }
            }
        },
        
        /************************************************************
         * 
         * 查询当前老师的所有分类
         * 
         ************************************************************/
        teacherData () {
            this.$http.get(this.teacherType).then(val=>{
                this.tezcherList = val.data
            }).catch(err => {
            })
        },
        
        /************************************************************
         * 
         * 细则
         * 
         ************************************************************/
        rulesData () {
            this.$http.get(this.rulesUrl).then(val=>{
                this.rulesList = val.data.map(el => {
                    if (el.fixed_score == null) {
                        el.labels = `${el.entry_content}(${el.lowest_score} 到 ${el.highest_score}分)`
                        return el
                    } else {
                        el.labels = `${el.entry_content}(${el.fixed_score}分)`
                        return el
                    }
                })
            }).catch(err => {
            })
        },
        
        /************************************************************
         * 
         * 单条数据查询（修改）
         * 
         ************************************************************/
        selData () {
            this.$http.get(this.selUrl).then(val=>{
                let data = val.data
                console.log('获取单条数据',data)
                this.form.suser_id = data.student
                this.form.remarks = data.remarks
                this.form.watchlist_rules_id = parseInt(data.watchlist_rules_id)
                this.form.type_name = parseInt(data.type_name)
                this.form.type = data.type
                if (data.type != 1) this.studState = true
                this.studentData(data.type_name)
                setTimeout(() => {
                    this.form.suser_id = data.student
                },1500)
            }).catch(err => {
            })
        }
    },
    created () {
        if (this.condition) this.selData ()
        this.teacherData ()
        this.rulesData ()
    },
}
</script>